 
	<style type="text/css">
		
		.container-box{
			display: flex;
		}
		.elementui-leftbox{
			flex: 0 0 20vw;
			height: 100vh;
			background-color: #666;
		}
		.rightbox{
			flex: 0 0 80vw;
			height: 100vh;
			background-color: #888;
		}
		.el-menu-vertical-demo{
			height: 100vh;
		}
		
		
	</style>


<!-- elementui / 侧边栏布局 start-->
	<div class="container-box">
		<div class="elementui-leftbox">
			<!--嵌入elementui框架的侧边导航栏组件-->
			<!-- 框架的组件文档 "https://element.eleme.cn/#/zh-CN/component/menu" -->
			<div id="app">
				<el-menu
			      default-active="2"
			      class="el-menu-vertical-demo"
			      @open="handleOpen"
			      @close="handleClose"
			      @select="handleSelect"
			      background-color="#545c64"
			      text-color="#fff"
			      active-text-color="#ffd04b">
			      <el-submenu index="1">
			        <template slot="title">
			          <i class="el-icon-location"></i>
			          <span>导航一</span>
			        </template>
			        <el-menu-item-group>
			          <template slot="title">分组一</template>
			          <el-menu-item index="1-1">选项1</el-menu-item>
			          <el-menu-item index="1-2">选项2</el-menu-item>
			        </el-menu-item-group>
			        <el-menu-item-group title="分组2">
			          <el-menu-item index="1-3">选项3</el-menu-item>
			        </el-menu-item-group>
			        <el-submenu index="1-4">
			          <template slot="title">选项4</template>
			          <el-menu-item index="1-4-1">选项1</el-menu-item>
			        </el-submenu>
			      </el-submenu>
			      <el-menu-item index="2">
			        <i class="el-icon-menu"></i>
			        <span slot="title">导航二</span>
			      </el-menu-item>
			      <el-menu-item index="3" disabled>
			        <i class="el-icon-document"></i>
			        <span slot="title">导航三</span>
			      </el-menu-item>
			      <el-menu-item index="4">
			        <i class="el-icon-setting"></i>
			        <span slot="title">导航四</span>
			      </el-menu-item>
			    </el-menu>
			</div>
			<!--elementui框架的导航栏组件结束-->
		</div>


		<!-- 右侧内容区域 -->
		<div class="rightbox">
			
			
		</div>
	</div>
	
	<script type="text/javascript">
		//组件初始化
		 var Main = {
		    methods: {
		      handleOpen(key, keyPath) {
		        console.log(key, keyPath);
		      },
		      handleClose(key, keyPath) {
		        console.log(key, keyPath);
		      },
		       handleSelect(key, keyPath) {
		        console.log(key, keyPath);
		        //获取当前点击元素对象
		        //console.log($('.el-menu').children().eq(keyPath[0]-1).text());
		      }
		    }
	  	}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>
	<!-- elementui / 侧边栏布局 end-->
